<template>
	<div class="content">
		<div class="center-layout">
			<div class="center-left">

				<div class="left-top">

					<img class="mini-logo" src="../assets/logo_min.png" />

					<span>熊猫电影管理后台</span>

				</div>

				<span class="about-text">SamWarrior2021全栈毕业项目</span>
			</div>
			<div class="center-right">
				<div class="center-right2">
					<span class="login_title">欢迎登陆</span>
					<template>
						<el-input class="input" prefix-icon="el-icon-user" v-model="username" clearable
							placeholder="请输入用户名"></el-input>
					</template><template>
						<el-input class="input" prefix-icon="el-icon-lock" v-model="password" show-password
							placeholder="请输入密码"></el-input>
					</template>
					<div class="jizhumima-layout">
						<el-checkbox v-model="checked1" label="记住密码"></el-checkbox>
					</div>

					<el-button class="btn-login" @click='clickLogin' type="primary" round>登 录</el-button>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				username: '',
				password: '',
				checked1: true

			}
		},
		methods: {
			async clickLogin() {
				if (this.username.length < 5 || this.password.length < 5) {
					this.$message({
						type: "warning",
						message: "请输入正确的用户名/密码"
					});
					return;
				}
				let res = await this.http.post('admin/admins/login', {
					username: this.username,
					password: this.password
				});

				if (res.data.code == 200) {
					//登录成功
					let token = res.data.token;
					localStorage.setItem('mytoken', token)
					setTimeout(() => {
						this.$router.replace({
							path: '/movies/list'
						})
					}, 500)

				} else {
					this.$message({
						type: "warning",
						message: res.data.msg
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-image: url(../assets/login_bg.jpg);
		background-repeat: no-repeat;
		// background-size: cover;
		background-size: 100% 100%;
		height: 100%;
		width: 100%;
		overflow: hidden;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.center-layout {
		background-color: white;
		display: flex;
		border-radius: 10px;
		flex-direction: row;
		overflow: hidden;
		box-shadow: 0px 0px 13px #333;
		opacity: 0.95;

		.center-left {
			width: 500px;
			display: flex;
			height: 380px;
			background-repeat: no-repeat;
			// background-size: cover;
			background-size: 100% 100%;
			background-image: url(../assets/login_bg2.jpg);

			.left-top {
				color: #FFFFFF;
				flex-direction: row;
				width: 100%;
				display: flex;
				font-size: 19px;
				opacity: 0.9;

				.mini-logo {
					width: 32px;
					height: 32px;
					margin-right: 10px;
					border-radius: 5px;
				}


			}

			.about-text {
				align-self: flex-end;
				width: 100%;
				padding: 10px;
				color: white;
				text-align: right;
				font-size: 11px;
				opacity: 0.9;
			}
		}

		.center-right {
			display: flex;
			flex-direction: column;
			width: 300px;
			justify-content: center;
			align-items: center;

			.center-right2 {
				display: flex;
				align-items: center;
				flex-direction: column;

				.login_title {
					color: #0055ff;
					font-weight: bold;
					font-size: 22px;
					margin-bottom: 20px;
				}

				.input {
					margin-top: 24px;
				}

				.jizhumima-layout {
					margin-top: 10px;
					display: flex;
					width: 100%;
					flex-direction: row-reverse;
				}

				.btn-login {
					width: 95%;
					margin-top: 40px;
				}

			}
		}
	}
</style>
